<script setup>
import { ref,watch } from 'vue'
import { fetchIndicesData } from '@/api/weatherAPI';
import { useCityStore } from '../stores/cityStore';
const cityStore = useCityStore()
import { useRouter } from 'vue-router';
import 'qweather-icons/font/qweather-icons.css'
const router = useRouter()
watch(
    ()=>cityStore.location,
    ()=>{
        getData(cityStore.location.id)
    },
    { immediate: true }
)
const indicceDaily = ref([])

async function getData(locationID) {
    const res =await fetchIndicesData(locationID,0)
    console.log(res)
    indicceDaily.value = res.daily
}
function selectIndice(item){
    router.push({
        path: `/livingIndexDetail/${item.type}`,
        query: {
            name: item.name,
            category: item.category,
            text: item.text
        }
    })
}
</script>

<template>
    <div class="indice">
        <h3>生活指数</h3>
        <ul>
            <li v-for="(item,i) in indicceDaily" :key="i" @click="selectIndice(item)">
                <p>{{item.name}}</p>
                <p>{{item.category}}</p>
            </li>
        </ul>
    </div>
</template>

<style scoped>
.indice{
    background-color: #efece7;
    border-radius: 1rem;
    padding: 2rem;
}
.indice>h3{
    text-align: center;
}
.indice>ul{
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
}
.indice>ul>li{
    background-color: #f1f1f1;
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
}
.indice>ul>li>p:nth-of-type(1){
    font-weight: bolder;
}
.indice>ul>li>p:nth-of-type(2){
    font-size: 0.8rem;
}
</style>